<template>
	<view class="content">
		<view class="background-ys">
			<image src="../../static/xmg.png" mode="aspectFit" />
			<view class="text-title">小 马 哥</view>
			<view class="text-title2">Xiao Ma Ge</view>
			<view class="text-body">物 流 货 运 平 台</view>
		</view>
		<view class="body">
			<view class="body1">
				<input type="number" placeholder="请输入手机号" v-model="phoneNumber" style="border: 1rpx solid #999;border-radius: 15rpx;flex: 1;height: 100rpx;padding: 0 30rpx;box-sizing: border-box;"/>
				
			</view>
			<!--都是复制-->
			<!-- <view class="btn" @click="login">快捷登录</view> -->
			<button  class="btn" @click="bangding_phone">绑定</button>
			
		</view>
		
		

	</view>
</template>

<script>
	import {
		baseUrl,
		appId,
		// AppS
	} from '@/util/config.js'
	import {
		ifFirstLogin,
	} from '@/api/user.js'
	import {
		bingPhone
	} from '@/api/index.js'

	export default {
		data() {
			return {
				title: 'Hello',
				value: -1,
				phoneNumber: "",
				receiveOpenId: '',
				OpenId: ""
			}
		},
		onLoad(option) {
			if(option.OpenId){
				this.OpenId = option.OpenId
			}
		},
		methods: {
			bangding_phone(){
				if(!this.phoneNumber){
					uni.showToast({
						title:'请输入手机号'
					})
					return
				}
				uni.showLoading({
					title: "正在绑定"
				})
				bingPhone({
					phone: this.phoneNumber,
					id: this.OpenId
				}, 'post')
				.then(res => {
					console.log(res)
					if(res.errno != -1){
						// ifFirstLogin({openId:res.data.userInfo.userId}, 'get')
						// .then((res) => {
						// 	if(res){
						// 		uni.setStorageSync('isfirstlogin', res);
						// 	}
						// })
						uni.setStorageSync("user",res.data.userInfo)
						uni.setStorageSync("X-Access-Token",res.data.token)
						uni.showToast({
							title: "绑定成功",
							icon: "none"
						})
						let settime = setTimeout(()=>{
							uni.switchTab({
								url: "/pages/expressPages/expressPages"
							})
							clearTimeout(settime)
						},1000)
					}else{
						uni.showToast({
							title: "绑定失败",
							icon: "none"
						})
					}
				})
				.catch({
					
				})
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.background-ys {
		width: 100%;
		height: 800rpx;
		//background: rgb(192, 266, 73);
		background: rgb(204, 255, 1);
		//background-image: url('../../static/bjtp.png');
		position: relative;
		// border: 1rpx solid red;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-top: 50rpx;
			margin-left: 270rpx;
		}

		.text-title {
			font-size: 100rpx;
			font-weight: bold;
			color: rgb(215, 94, 81);
			margin-left: 200rpx;
		}

		.text-title2 {
			font-size: 60rpx;
			font-weight: bold;
			color: rgb(84, 109, 165);
			margin-left: 210rpx;
		}

		.text-body {
			font-size: 60rpx;
			padding-top: 10rpx;
			padding-left: 160rpx;
			color: rgb(208, 92, 79);
			// border: 1rpx solid red;
			// font-weight: bold;
		}
	}

	.body {
		width: 100%;
		position: absolute;
		top: 580rpx;
		background: white;
		border-radius: 30rpx;
		min-height: 400rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.body1 {
			// border: 1rpx solid red;
			margin-top: 100rpx;
			display: flex;

			radio {
				// border: 1rpx solid red;
				padding-left: 30rpx;
				padding-top: 18rpx;
			}

			.body1-content {
				padding-left: 20rpx;
				// border: 1rpx solid red;
				color: rgb(209, 209, 209);
				font-size: 30rpx;
			}

		}

		.btn {
			height: 100rpx;
			// border: 1rpx solid red;
			margin: 70rpx auto;
			background: rgb(204, 255, 1);
			text-align: center;
			line-height: 100rpx;
			color: rgb(215, 94, 81);
			width: 700rpx;
			border-radius: 30rpx;
			font-weight: bold;

		}
	}
</style>